<template>
  <el-dialog
    v-dialogDrag
    :fullscreen="isFullscreen"
    :visible.sync="dialogVisible"
    :before-close="closeForm"
    width="6rem"
  >
    <div slot="title" class="header-title hd-title">
      <span>{{ dialogTitle }}</span>
      <i
        v-if="isFullscreen === false"
        class="el-icon-full-screen"
        @click="fScreen"
      ></i>

      <i v-else class="el-icon-news" @click="ifScreen"></i>
    </div>

    <el-form :model="form" :rules="rules" ref="form" label-width="0.5625rem">
      <el-row v-if="dialogTitle === '授权'">
        <el-col :span="24">
          <el-form-item label="授权子账号：" prop="membe_id">
            <el-select
              style="display: block"
              v-model="form.membe_id"
              multiple
              placeholder="请选择授权账号"
            >
              <el-option
                v-for="(item, index) in membe_list"
                :key="index"
                :label="item.username"
                :value="item.membe_id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-else>
        <el-col :span="8">
          <el-form-item label="平台：" prop="shop_type">
            <el-select
              @change="changeSelectVal"
              style="display: block"
              v-model="form.shop_type"
            >
              <el-option
                v-for="item in shop_type_list"
                :key="item.val"
                :label="item.key"
                :value="item.val"
                >{{ item.key }}
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="店铺名称：" prop="shop_title">
            <el-input v-model="form.shop_title"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="企业代码：" prop="company_No">
            <el-input v-model="form.company_No"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <template v-for="(item, index) in portInfoValues">
            <el-form-item
              :label="item.label + '：'"
              :key="index"
              :prop="item.key"
              :rules="[
                {
                  required: true,
                  message: `请输入${item.key}`,
                  trigger: ['blur', 'change'],
                },
              ]"
            >
              <el-input v-model="form[item.key]"></el-input>
            </el-form-item>
          </template>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button size="small" type="primary" @click="handleSubmit"
        ><i class="el-icon-circle-plus-outline"></i> 保存
      </el-button>
      <el-button size="small" @click="closeForm"
        ><i class="el-icon-circle-close"></i> 取消
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getChild } from "@/api/user";
import { shopClass, portInfoValue } from "@/api/shop";

export default {
  props: {
    editData: {
      type: Object,
      default: () => ({}),
    },
    dialogTitle: {
      type: String,
      default: "",
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isFullscreen: false,
      form: {
        shop_type: "",
        shop_title: "",
        company_No: "",
      },
      membe_list: null,
      shop_type_list: null,
      portInfoValues: null,
      rules: {
        shop_type: [
          { required: true, message: "请选择平台", trigger: "change" },
        ],
        shop_title: [
          { required: true, message: "请输入店铺名称", trigger: "blur" },
        ],
        company_No: [
          { required: true, message: "请输入企业代码", trigger: "blur" },
        ],
        membe_id: [
          { required: true, message: "请选择授权账号", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    editData: {
      handler(val) {
        this.form = { ...val };
        this.portInfoValue(val.shop_type);
        if (val.shop_value) {
          this.getChild();
        }
      },
      immediate: true,
    },
    dialogVisible(val) {
      if (val) {
        this.shopClass();
      }
    },
  },
  methods: {
    changeSelectVal(val) {
      this.portInfoValue(val);
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit("submit", this.form);
          this.closeForm();
        }
      });
    },
    closeForm() {
      this.$emit("closeForm");
      this.isFullscreen = false;
      if (this.$refs["form"] !== undefined) {
        this.$refs["form"].resetFields();
      }
    },
    fScreen() {
      this.isFullscreen = true;
    },
    ifScreen() {
      this.isFullscreen = false;
    },
    async getChild() {
      const res = await getChild();
      this.membe_list = res.data.data.data;
    },
    async shopClass() {
      const res = await shopClass();
      if (res.data.status === 200) {
        this.shop_type_list = res.data.data;
      }
    },
    async portInfoValue(val) {
      const res = await portInfoValue({ val: val });
      if (res.data.status === 200) {
        this.portInfoValues = res.data.data;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

::v-deep .el-input__inner {
  height: 32px;
  line-height: 32px;
}

::v-deep .el-dialog__body {
  padding: 20px 20px 0 20px;
}

::v-deep .el-dialog__footer {
  padding: 10px 16px;
  border-top: 1px solid #f0f0f0;
}

.el-select-dropdown
  .el-scrollbar
  .el-scrollbar__view
  .el-select-dropdown__item {
  height: auto;
  padding: 0 15px;
}

.hd-title {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  margin-right: 26px;
}

.el-icon-full-screen {
  cursor: pointer;
}

.el-icon-news {
  cursor: pointer;
}
</style>
